<template>
    <div class="forget">
        <div class="zhengti">


        <div class="buzhou">
            <el-steps :active="active" finish-status="success">
                <el-step title="步骤 1"></el-step>
                <el-step title="步骤 2"></el-step>
                <el-step title="步骤 3"></el-step>
            </el-steps>
        </div>



        <transition name="el-fade-in-linear">
            <el-form :rules="rules"
                     v-loading="loading"
                     element-loading-text="正在验证..."
                     element-loading-spinner="el-icon-loading"
                     element-loading-background="rgba(0, 0, 0, 0.8)"
                     ref="form"
                     :model="LoginForm"
                     class="loginContainer1" v-show="show">
                <h3 class="loginTile1">忘记密码</h3>
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user" v-model="LoginForm.username" placeholder="请输入邮箱地址" type="text"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model="LoginForm.code" placeholder="点击更换验证码" type="text" auto-complete="false" style="width: 250px;margin-right: 5px"></el-input>
                    <img :src="captchaUrl" @click="updateCaptcha">
                </el-form-item>
                <el-button type="primary" style="width: 100%" @click="submitLogin('form')">下一步</el-button>
            </el-form>
        </transition>


            <transition name="el-fade-in-linear">
                <el-form :rules="rules"
                         v-loading="loading"
                         element-loading-text="正在验证..."
                         element-loading-spinner="el-icon-loading"
                         element-loading-background="rgba(0, 0, 0, 0.8)"
                         ref="form"
                         :model="test1"
                         class="loginContainer1" v-show="show1">
                    <h3 class="loginTile1">修改密码</h3>
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user" v-model="test1.username" placeholder="请输入用户名" type="text"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-warning" v-model="test1.password" placeholder="请输入密码" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input prefix-icon="el-icon-warning" v-model="passwordya" placeholder="请重新输入密码" type="password"></el-input>
                    </el-form-item>
                    <el-button type="primary" style="width: 100%" @click="submitLogin1('form')">下一步</el-button>
                </el-form>
            </transition>



            <transition name="el-fade-in-linear">
                <el-form :rules="rules1"
                         v-loading="loading"
                         element-loading-text="正在验证..."
                         element-loading-spinner="el-icon-loading"
                         element-loading-background="rgba(0, 0, 0, 0.8)"
                         ref="form"
                         :model="LoginForm1"
                         class="loginContainer1" v-show="show2">
                    <h3 class="loginTile1">重新登录</h3>
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user" v-model="LoginForm1.username" placeholder="请输入用户名" type="text"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-warning" v-model="LoginForm1.password" placeholder="请输入密码" type="password" auto-complete="false"></el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input v-model="LoginForm1.code" placeholder="点击更换验证码" type="text" auto-complete="false" style="width: 250px;margin-right: 5px"></el-input>
                        <img :src="captchaUrl" @click="updateCaptcha">
                    </el-form-item>
                    <el-button type="primary" style="width: 100%" @click="submitLogin2('form')">登录</el-button>
                </el-form>
            </transition>


        </div>
    </div>
</template>

<script>
    export default {
        name: "forget",
        data(){
            return{
                //加time确保验证码可以刷新 不然可能只会返回一张验证码
                captchaUrl:'/login/captcha?time='+new Date(),
                LoginForm:{
                    username:'',
                    password:'admin',
                    code:'',
                },
                LoginForm1:{
                    username:'',
                    password:'',
                    code:'',
                },
                checked:true,
                rules:{
                    username:[{required:true,message:'请输入用户名',trigger:'blur'}],
                    password:[{required:true,message:'请输入密码',trigger:'blur'}],
                    code:[{required:true,message:'请输入验证码',trigger:'blur'}]
                },
                rules1:{
                    username:[{required:true,message:'请输入用户名',trigger:'blur'}],
                    password:[{required:true,message:'请输入密码',trigger:'blur'}],
                    code:[{required:true,message:'请输入验证码',trigger:'blur'}]
                },
                loading:false,
                urlparam:{
                    loginName:'',
                    code:''
                },
                show: false,
                show1: false,
                show2: false,
                active: 0,
                test1:{
                    username:'',
                    password:''
                },
                passwordya:''
            }
        },
        mounted(){
            this.showBuzhou()
        },
        methods:{
            submitLogin2(formName){
                this.urlparam.loginName=this.LoginForm1.username;
                this.urlparam.password=this.LoginForm1.password;
                this.urlparam.code=this.LoginForm1.code;
                this.$http({
                    url:'/login/get',
                    method:'get',
                    params:this.urlparam
                }).then(result=>{
                    if(result.data==1){
                        this.$message({
                            type:'success',
                            message:'登录成功',
                            showClose: true
                        });
                        window.sessionStorage.setItem("username",this.urlparam.loginName);
                        this.$router.push("/homeTest")
                    }else if(result.data==0){
                        this.$message({
                            type:'error',
                            message:'密码错误或验证码错误',
                            showClose: true
                        })
                    }else {
                        this.$message({
                            type:'error',
                            message:'未知错误',
                            showClose: true
                        })
                    }
                    console.log(result);
                })
            },
            submitLogin1(formName){
                if(this.test1.password==this.passwordya){
                    let val={
                        login:'',
                        password:''
                    };
                    val.login=this.test1.username;
                    val.password=this.test1.password;
                    this.$http({
                        url:'/login/updatePassword',
                        method: 'put',
                        params:val
                    }).then(result=>{
                        if(result.data==200){
                            this.$message({
                                type:'success',
                                message:'修改成功',
                                showClose: true
                            });
                            this.show1=false;
                            this.active=2;
                            this.show2=true
                            this.captchaUrl='/api/login/captcha?time='+new Date();
                        }else {
                            this.$message({
                                type:'error',
                                message:'修改失败',
                                showClose: true
                            });
                        }
                        console.log(result);
                    })
                }else {
                    this.$message({
                        type:'error',
                        message:'两次密码不一致',
                        showClose: true
                    })
                }
            },
            submitLogin(formName){
                this.urlparam.loginName=this.LoginForm.username;
                this.urlparam.password=this.LoginForm.password;
                this.urlparam.code=this.LoginForm.code;
                this.$http({
                    url:'/login/buzhou',
                    method:'get',
                    params:this.urlparam
                }).then(result=>{
                    if(result.data==200){
                        this.$message({
                            type:'success',
                            message:'验证成功',
                            showClose: true
                        });
                        this.show=false;
                        this.show1=true;
                        this.active=this.active+1;
                    }else if(result.data==400){
                        this.$message({
                            type:'error',
                            message:'邮箱或验证码错误',
                            showClose: true
                        })
                    }else {
                        this.$message({
                            type:'error',
                            message:'未知错误',
                            showClose: true
                        })
                    }
                    console.log(result);
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            updateCaptcha(){
                this.captchaUrl='/login/captcha?time='+new Date();
            },
            showBuzhou(){
                if(this.active==0){
                    this.show=true;
                }
            }
        }
    }
</script>

<style>
    .zhengti{

    }
    .forget{
        width: 100%;
        height: 100%;
    }
    .loginContainer1{
        border-radius: 15px;
        background-clip: padding-box;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .loginTile1{
        margin: 0px auto 40px auto;
        text-align: center;
    }
    .loginRemeberMe1{
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
    .el-form-item__content1{
        display: flex;
        align-items: center;
    }
    .buzhou{


    }
</style>
